<template>
  <div class="caseComp">
    <div class="caseCompTitle">编辑投诉人信息</div>
    <el-form :model="info" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="真实姓名" prop="complaintPerName">
        <el-input
          v-model="info.complaintPerName"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="caseCompTitleInput">
        <p class="caseCompTitleInput">
          {{ info.complaintPerTel || '- -'
          }}<span v-if="info.complaintPerTel"
            >(共投诉{{ info.repeatNum }}次)</span
          >
        </p>
      </el-form-item>
      <el-form-item label="身份证号" prop="complaintPerIdcard">
        <el-input
          v-model="info.complaintPerIdcard"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系地址" prop="complaintPerAddress">
        <el-input
          v-model="info.complaintPerAddress"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="caseCompBtn">
      <el-button
        type="primary"
        v-sdc
        :loading="isLoading"
        class="commonBut saveBtn"
        @click="save"
        >保存</el-button
      >
      <el-button type="default" v-sdc class="commonBut" @click="finish"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'caseDepartment',
  props: {
    childData: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  data() {
    let checkRegNo = (rule, value, callback) => {
      var city = {
        11: '北京',
        12: '天津',
        13: '河北',
        14: '山西',
        15: '内蒙古',
        21: '辽宁',
        22: '吉林',
        23: '黑龙江 ',
        31: '上海',
        32: '江苏',
        33: '浙江',
        34: '安徽',
        35: '福建',
        36: '江西',
        37: '山东',
        41: '河南',
        42: '湖北 ',
        43: '湖南',
        44: '广东',
        45: '广西',
        46: '海南',
        50: '重庆',
        51: '四川',
        52: '贵州',
        53: '云南',
        54: '西藏 ',
        61: '陕西',
        62: '甘肃',
        63: '青海',
        64: '宁夏',
        65: '新疆',
        71: '台湾',
        81: '香港',
        82: '澳门',
        91: '国外 ',
      }
      var tip = ''
      var pass = true

      var patt1 = new RegExp(
        '(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)'
      )
      if (value == '') {
        pass = true
      } else if (!patt1.test(value)) {
        callback(new Error('身份证号格式错误'))
        pass = false
      } else if (!city[value.substr(0, 2)]) {
        callback(new Error('地址编码错误'))
        pass = false
      } else {
        //18位身份证需要验证最后一位校验位
        if (value.length == 18) {
          value = value.split('')
          //∑(ai×Wi)(mod 11)
          //加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          //校验位
          var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
          var sum = 0
          var ai = 0
          var wi = 0
          for (var i = 0; i < 17; i++) {
            ai = value[i]
            wi = factor[i]
            sum += ai * wi
          }
          var last = parity[sum % 11]
          if (parity[sum % 11] != value[17]) {
            callback(new Error('身份证号码错误'))
            pass = false
          }
        }
      }
      if (pass) {
        callback()
      }
    }
    return {
      isLoading: false,
      info: {
        id: '',
        complaintPerName: '',
        complaintPerIdcard: '',
        complaintPerAddress: '',
        complaintPerTel: '',
        repeatNum: '',
      },
      rules: {
        complaintPerName: [
          { max: 30, message: '最多输入30个字', trigger: 'blur' },
        ],
        complaintPerIdcard: [{ validator: checkRegNo, trigger: 'blur' }],
      },
    }
  },
  mounted() {
    const {
      id,
      complaintPerName,
      complaintPerIdcard,
      complaintPerAddress,
      complaintPerTel,
      repeatNum,
    } = this.childData
    this.info = {
      id,
      complaintPerName,
      complaintPerIdcard,
      complaintPerAddress,
      complaintPerTel,
      repeatNum,
    }
  },
  methods: {
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          const {
            id,
            complaintPerName,
            complaintPerIdcard,
            complaintPerAddress,
          } = this.info
          let params = {
            id,
            complaintPerName,
            complaintPerIdcard,
            complaintPerAddress,
          }
          this.axios
            .post('api-r/rbp/modifyRightsAppealPerson', params)
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: res.data.msg,
                })
                this.isLoading = false
                this.finish(1)
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
                this.isLoading = false
              }
            })
        }
      })
    },
    finish(index) {
      this.$emit('callback', { success: index == 1 ? true : false })
    },
  },
}
</script>
<style lang="less" scoped>
.caseComp {
  border: 1px solid #dcdfe6;
  background-color: #f8f9fb;
  padding: 15px;
  &Title {
    color: #009588;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 12px;
  }
  &Btn {
    text-align: center;
    margin: 24px 0 10px;
    .el-button {
      width: 120px;
    }
  }
  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #009588 !important;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background: #009588 !important;
    border-color: #009588 !important;
  }
}
</style>
